/* eslint-disable no-unused-vars */
import React, { useEffect, useState } from "react";
import styles from './login.module.css'
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { getAccountCache, getPasswordCache } from "@/store/actions/storage";
import { authService } from "@/store/actions/AuthService";


export default function Login() {

    const history = useHistory()

    const [account, setAccount] = useState("");
    const [password, setPassword] = useState("");
    const [canSubmit, setCanSubmit] = useState(false);
    const [isLoading, setLoading] = useState(false);

    useEffect(() => {
        let acc = getAccountCache();
        let pwd = getPasswordCache();

        if (acc.length > 0 && pwd.length > 0) {
            setAccount(acc);
            setPassword(pwd);
            reqLogin(acc, pwd);
        }

        return () => {
        }
    }, [])

    const onHandleAccountBlur = (e) => {
        setCanSubmit(account.length > 0 && password.length > 0);
    }

    const onHandlePasswordBlur = (e) => {
        setCanSubmit(account.length > 0 && password.length > 0);
    }

    const onHandleAccountChange = (e) => {
        let m = e.target.value || "";
        setAccount(m);
        setCanSubmit(m.length > 0 && password.length > 0);
    }

    const onHandlePasswordChange = (e) => {
        let c = e.target.value || "";
        setPassword(c);
        setCanSubmit(account.length > 0 && c.length > 0);
    }

    const onHandleLoginSubmit = (event) => {
        event && event.stopPropagation();

        if (account.length > 0 && password.length > 0) {
            reqLogin(account, password);
        }
    }

    const reqLogin = async (username, password) => {
        try {
            setLoading(true);
            const { success, data } = await authService.login({
                username: username,
                password: password
            });
            setLoading(false);

            if (success) {
                history.replace('/launch');
            }
        } catch (error) {
            console.error("登录处理出错:", error);
        }
    }

    return (
        <div className={styles.loginRoot}>

            <div className={styles.loginContent}>
                <div className={styles.loginTitle}>Diandian数据</div>

                <div className={`${styles.loginInputRowContent} ${styles.loginTopMargin16}`}>
                    <input className={styles.loginInputContent}
                        name="account"
                        placeholder="请输入账号"
                        type="text"
                        value={account}
                        onBlur={onHandleAccountBlur}
                        onChange={onHandleAccountChange}
                        autoComplete="off" />
                </div>

                <div className={`${styles.loginInputRowContent} ${styles.loginTopMargin16}`}>
                    <input className={styles.loginInputContent}
                        name="password"
                        placeholder="请输入密码"
                        type="text"
                        value={password}
                        onBlur={onHandlePasswordBlur}
                        onChange={onHandlePasswordChange}
                        autoComplete="off" />
                </div>

                {!isLoading && <div className={canSubmit ? `${styles.loginSubmitEnable} ${styles.loginTopMargin16}` : `${styles.loginSubmitDisable} ${styles.loginTopMargin16}`} onClick={onHandleLoginSubmit}>登录</div>}
                {isLoading && <div className={`${styles.loginSubmitDisable} ${styles.loginTopMargin16}`} onClick={() => { }}>
                    <div className={styles.loginLoading}></div>
                </div>}
            </div>
        </div>
    )
}